<template>
  <div class="page_main">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb>
    <el-card>
      <LeiSlider title="过程更新" />
      <div class="content">
        <div
          class="content_text"
          v-for="item in contentData"
          :key="item.id"
          @click="goDetail(item)"
        >
          <div class="content_text_top">
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="content_text_bottom">{{ item.title }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import img1 from '@/assets/imgs/ddw.jpg'
export default {
  data() {
    return {
      activePath: {
        path: '',
        title: '生产过程管理',
      },

      contentData: [
        { id: 0, imgUrl: img1, title: '生产计划更新构建' },
        { id: 1, imgUrl: img1, title: '任务单更新构建' },
        { id: 2, imgUrl: img1, title: '二维码更新构建' },
        { id: 4, imgUrl: img1, title: '二模型选择更新构建' },
        { id: 4, imgUrl: img1, title: '二模型选择更新构建' },
      ],
    }
  },
  methods: {
    goDetail(item) {
      this.$router.push({
        path: '/process_detail',
        query: { item: JSON.stringify(item) },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .content_text {
    margin: 10px 15px 10px 0;
    width: 300px;
    height: 400px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 1px 1px rgba(26, 34, 54, 0.1),
      0px 3px 3px rgba(26, 34, 54, 0.05);
    .content_text_top {
      width: 100%;
      height: 340px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content_text_bottom {
      font-size: 18px;
      color: #000;
      font-weight: 800;
    }
  }
}
</style>